<template>
	<view class="container">
		<HeadNav back title="邮件" bg="https://ucp-tcg.com:18001/mc/app/static/shnag_bg2.png" bgSize="cover" />
		<view class="top-box">
			<text>全部消息{{total}}条</text>
			<!-- <text>未读消息3条</text> -->
			<!-- <text style="color: rgb(0, 123, 255);font-size: 32rpx;">全部已读</text> -->
		</view>
		<scroll-view scroll-y class="card-list-height" @scrolltolower="getData">
			<uni-collapse v-model="value" @change="handleChange">
				<uni-collapse-item v-for="item of dataList" :key="item.id">
					<template v-slot:title>
						<view class="list-header">
							<view class="circle" v-if="!item.isRead"></view>
							<text class="item-name">{{item.title}}</text>
							<text class="item-name">{{item.createTime}}</text>
						</view>
					</template>
					<view class="list-content">
						<text class="text">{{item.message}}</text>
					</view>
				</uni-collapse-item>
			</uni-collapse>
			<uni-load-more v-if="showLoadMore" :status="pagination.loadingStatus" />
		</scroll-view>

	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import HeadNav from '@/components/HeadNav'
	import {
		mailListApi,
		updateMailApi
	} from '@/api/user'

	const pagination = reactive({
		page: 0,
		size: 20,
		loadingStatus: '',
		pageLimit: false
	})
	const showLoadMore = ref(true)
	const dataList = ref([])
	const value = ref([])
	const total = ref(0)
	let collapseArr = []
	onLoad(options => {
		getData()
	})

	const getData = async () => {
		if (pagination.pageLimit) return
		pagination.page++

		const params = {
			pageNum: pagination.page,
			pageSize: pagination.size
		}

		showLoadMore.value = true
		pagination.loadingStatus = 'loading'
		pagination.pageLimit = true

		try {
			const res = await mailListApi(params);
			// console.log('res', res)
			dataList.value = dataList.value.concat(res.rows);
			total.value = res.total

			if (dataList.value.length === 0) {
				// 查不到数据
				pagination.pageLimit = true
				pagination.loadingStatus = 'noMore'
			} else if (pagination.page * pagination.size >= res.total) {
				pagination.pageLimit = true
				showLoadMore.value = false
			} else {
				pagination.loadingStatus = 'more'
				pagination.pageLimit = false
			}

		} catch (error) {
			console.log(error)
			pagination.pageLimit = false
			uni.showToast({
				title: '查询邮件数据失败，请稍后再试',
				icon: 'error'
			})

		}
	}

	const handleChange = (e) => {
		// console.log(e);
		// 先判断是展开还是收缩
		if (e.length > collapseArr.length) {
			const difference = e.filter(item => !collapseArr.includes(item));
			const index = parseInt(difference[0])
			const isRead = dataList.value[index].isRead
			// console.log('difference', difference); // 输出: [1, 2, 3]
			if (isRead) return
			updateEmailSatus({
				id: dataList.value[index].id
			}, index)
		}
		collapseArr = e
	}

	const updateEmailSatus = async (params, index) => {
		await updateMailApi(params)
		dataList.value[index].isRead = true
		// dataList.value.splice(index, 1, obj); // 使用 splice 触发更新
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #EBEBEB;
		height: 100vh;
	}

	.top-box {
		padding: 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		// background-color: #F6F5F1;
		font-size: 28rpx;
		letter-spacing: 2rpx;
	}

	.list-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		// padding-left: 30rpx;
		padding-left: 36rpx;
		padding-right: 16rpx;
		height: 48px;
		line-height: 48px;
		box-sizing: border-box;
		position: relative;

		.circle {
			width: 16rpx;
			height: 16rpx;
			border-radius: 50%;
			background-color: #ff5a5f;
			position: absolute;
			left: 16rpx;
			top: 10rpx;
		}

		.item-name {
			// margin-left: 20rpx;
			font-size: 32rpx;
			letter-spacing: 2rpx;
		}
	}

	.list-content {
		color: #999;
		font-size: 28rpx;
		line-height: 44rpx;
		padding: 24rpx 30rpx;
		letter-spacing: 2rpx;
	}

	.item-time {
		color: #999;
		font-size: 32rpx;
	}

	.card-list-height {
		//max-height: calc(100vh - 102rpx - env(safe-area-inset-bottom));
		max-height: 80vh;
	}
</style>